<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <script src="./http1.js"></script>
    <style>
        html,body{
            height: 100%;
            width: 100%;
        }
        *{
            padding: 0;
            margin: 0;
        }
        h2{
            margin: 20px;
        }
        .songlist{
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #999;
            overflow: visible;
        }
        .songlist img{
            height: 100%;
            margin-right: 20px;
        }
        .songlist p{
            width: 150px;
        }
        .songlist button{
            margin-right: 20px;
        }
        .songlist audio{
            height: 80%;
        }
    </style>
</head>
<body>
    <h2></h2>
    <script>
        let h2=document.querySelector("h2");
        window.onload=function(){
            // 页面加载完成时,从会话存储中拿到用户搜索的值
            let data=sessionStorage.getItem("data");
            h2.textContent=data;
            // 定义对象存放接口的参数
            let obj={
                keywords:data
            }
            http.ajax(
                {
                    type:"get",
                    url:"https://autumnfish.cn/search",
                    data:obj,
                    sucess:function(res){
                        // 将json字符串转换为js对象
                        let result=JSON.parse(res);
                        // console.log(result);
                        // console.log(result.result.songs);
                        let songs=result.result.songs;
                        let songlist="";
                        let body=document.body;
                        // 循环遍历歌曲，并拼接歌曲的列表，循环完成后添加到body
                        songs.forEach(function(item){
                            songlist+=`<div class="songlist">
                                            <img src=${item.artists[0].img1v1Url}>
                                            <p>${item.name}</p>
                                            <button data-id='${item.id}'>播放</button>
                                        </div>`;
                            // console.log(item);
                        })
                        body.innerHTML+=songlist;
                        // 因为歌曲列表是动态添加,所以用到事件委派
                        body.addEventListener("click",function(event){
                            // 如果点击的是播放按钮,调后端接口传递歌曲的id,拿到歌曲的mp3 audio放到页面上
                            if(event.target.textContent==="播放"){
                                // console.log(event.target.dataset['id']);
                                let songid={
                                    id:event.target.dataset['id']
                                }
                                http.ajax({
                                    type:"get",
                                    url:"https://autumnfish.cn/song/url",
                                    data:songid,
                                    sucess:function(res){
                                        // console.log(JSON.parse(res));
                                        let res1=JSON.parse(res).data;
                                        // console.log(res1[0].url);
                                        event.target.innerText="停止播放";
                                        let audio=`<audio src="${res1[0].url}" controls></audio>`
                                        event.target.parentNode.innerHTML+=audio;
                                    }
                                })
                            }
                            // 如果点击的是停止播放按钮,移除MP3
                            else if(event.target.textContent==="停止播放"){
                                event.target.nextElementSibling.remove();
                                event.target.textContent="播放";
                            }
                            // 如果点击的是歌曲的名字调取歌曲的评论
                            else if(event.target.nodeName==="P"){
                                let id=parseInt(event.target.nextElementSibling.dataset['id']);
                                let songname=event.target.textContent;
                                sessionStorage.setItem('id',id);
                                sessionStorage.setItem('songname',songname);
                                location.href="./comments.html";
                            }
                        })
                    }
                }
            )
        }
    </script>
</body>
</html>